<script setup lang="ts">
import HeaderArea from "@/components/search/HeaderArea.vue";
import {getIntegration} from "@/api/person/person";
// import {getUseInfor} from "@/api/person/Persistence";
import {ref} from "vue";
// import {onMounted, ref} from "vue";
// const User=getUseInfor()
// console.log(User.userInfo)
const List=ref<any>('')
// const total = ref(0);
getIntegration().then(res=>{
    console.log(res)
    List.value=res.rows;
    // for(let i=0;i<res.rows.length;i++){
    //     total.value+=res.rows[i].detailChangeAdd
    // }
})

</script>

<template>
    <div style="height: 100vh;overflow: hidden">
        <HeaderArea>
        </HeaderArea>
        <div class="top">
            <div class="integrationTotal">
                <img src="./images/矢量智能对象@3x.png" height="50px" width="50px">
                <div>
                    <p>我的积分</p>
                    <p>{{List[0].newIntegral}}</p>
                </div>
            </div>
            <div class="information">
                <p class="title">明细记录</p>
                <div class="box">
                    <div class="integrationType" v-for="(item,index) in List" :key="index">
                        <img src="./images/组%207@2x(3).png" height="30px">
                        <div class="integrationType_Article">
                            <p v-if="item.configName=='兑换'">{{item.configName}}减积分</p>
                            <p v-else>{{item.configName}}得积分</p>
                            <p ><span>我们得2023.冀商....</span><span>{{ item.changeTime }}</span></p>
                        </div>
                        <p class="integrationDetail" v-if="item.configName=='兑换'">-{{ item.detailChangeAdd }}.0</p>
                        <p class="integrationDetail" v-else>+{{ item.detailChangeAdd }}.0</p>
                    </div>
                    <p class="bottom">没有更多数据了~</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.top {
  //height: 230px;
    height: 95vh;
    overflow: hidden;
  background-image: url("images/组 7.png");
  background-repeat: no-repeat;
  overflow: hidden;
  .integrationTotal{
    display: flex;
    background-color: white;
    width: 140px;
    border-radius: 30px;
    margin: 130px 0 0 20px;
    div{
      margin-left: 10px;
      p:first-child{
        color: gray;
        font-size: 12px;
      }
      p:last-child{
        font-weight: 700;
        font-size: 20px;
          span:first-child{
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: nowrap;
          }
      }
    }
  }
}

.information {
  //margin-top: 20px;
  width: 95%;
  margin: 20px auto 0;
  //height: 420px;
  background-image: url("images/bg 拷贝.png");
    background-repeat: no-repeat;
  //border: 1px solid white;
  border-radius: 20px;
  .title{
    padding:20px 0 0  30px;
    font-size: 18px;
    font-weight: 700;
  }
  .integrationType{
    width: 90%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .integrationType_Article{
      width: 230px;
      p:first-child{
        font-weight: 700;
      }
      p:last-child{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: gray;
      }
    }
  }
  .integrationDetail{
    width: 30px;
  }
    .box{
        height: 65vh;
        overflow: auto; /* 显示滚动条，根据内容决定是否显示 */
        /* 隐藏默认的滚动条样式 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        .scroll-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, and Opera */
        }
    }
}
.bottom {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    margin-bottom: 60px;
    padding-bottom: 10px;
}
</style>